home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2009 June / PersonalComputerWorld-June2009-CoverdiscCD.iso / Software / Freeware / Firebug 1.3.3 / firebug-1.3.3-fx.xpi / content / firebug / layout.js < prev    next >
Encoding:
JavaScript  |  2009-02-19  |  14.2 KB  |  407 lines
  1. /* See license.txt for terms of usage */
  2.  
  3. FBL.ns(function() { with (FBL) {
  4.  
  5. // ************************************************************************************************
  6.  
  7. function LayoutPanel() {}
  8.  
  9. LayoutPanel.prototype = extend(Firebug.Panel,
  10. {
  11.     template: domplate(
  12.     {
  13.         tag:
  14.             DIV({class: "outerLayoutBox"},
  15.                 DIV({class: "offsetLayoutBox $outerTopMode $outerRightMode $outerBottomMode $outerLeftMode"},
  16.                     DIV({class: "layoutEdgeTop layoutEdge"}),
  17.                     DIV({class: "layoutEdgeRight layoutEdge"}),
  18.                     DIV({class: "layoutEdgeBottom layoutEdge"}),
  19.                     DIV({class: "layoutEdgeLeft layoutEdge"}),
  20.  
  21.                     DIV({class: "layoutLabelTop layoutLabel v$outerTop"},
  22.                         SPAN({class: "editable"}, '$outerTop')
  23.                     ),
  24.                     DIV({class: "layoutLabelRight layoutLabel v$outerRight"},
  25.                         SPAN({class: "editable"}, '')
  26.                     ),
  27.                     DIV({class: "layoutLabelBottom layoutLabel v$outerBottom"},
  28.                         SPAN({class: "editable"}, '')
  29.                     ),
  30.                     DIV({class: "layoutLabelLeft layoutLabel v$outerLeft"},
  31.                         SPAN({class: "editable"}, '$outerLeft')
  32.                     ),
  33.  
  34.                     DIV({class: "layoutCaption"}, '$outerLabel'),
  35.  
  36.                     DIV({class: "marginLayoutBox layoutBox editGroup"},
  37.                         DIV({class: "layoutCaption"}, $STR("LayoutMargin")),
  38.                         DIV({class: "layoutLabelTop layoutLabel v$marginTop"},
  39.                             SPAN({class: "editable"}, '$marginTop')
  40.                         ),
  41.                         DIV({class: "layoutLabelRight layoutLabel v$marginRight"},
  42.                             SPAN({class: "editable"}, '$marginRight')
  43.                         ),
  44.                         DIV({class: "layoutLabelBottom layoutLabel v$marginBottom"},
  45.                             SPAN({class: "editable"}, '$marginBottom')
  46.                         ),
  47.                         DIV({class: "layoutLabelLeft layoutLabel v$marginLeft"},
  48.                             SPAN({class: "editable"}, '$marginLeft')
  49.                         ),
  50.  
  51.                         DIV({class: "borderLayoutBox layoutBox editGroup"},
  52.                             DIV({class: "layoutCaption"}, $STR("LayoutBorder")),
  53.                             DIV({class: "layoutLabelTop layoutLabel v$borderTop"},
  54.                                 SPAN({class: "editable"}, '$borderTop')
  55.                             ),
  56.                             DIV({class: "layoutLabelRight layoutLabel v$borderRight"},
  57.                                 SPAN({class: "editable"}, '$borderRight')
  58.                             ),
  59.                             DIV({class: "layoutLabelBottom layoutLabel v$borderBottom"},
  60.                                 SPAN({class: "editable"}, '$borderBottom')
  61.                             ),
  62.                             DIV({class: "layoutLabelLeft layoutLabel v$borderLeft"},
  63.                                 SPAN({class: "editable"}, '$borderLeft')
  64.                             ),
  65.  
  66.                             DIV({class: "paddingLayoutBox layoutBox editGroup"},
  67.                                 DIV({class: "layoutCaption"}, $STR("LayoutPadding")),
  68.                                 DIV({class: "layoutLabelTop layoutLabel v$paddingTop"},
  69.                                     SPAN({class: "editable"}, '$paddingTop')
  70.                                 ),
  71.                                 DIV({class: "layoutLabelRight layoutLabel v$paddingRight"},
  72.                                     SPAN({class: "editable"}, '$paddingRight')
  73.                                 ),
  74.                                 DIV({class: "layoutLabelBottom layoutLabel v$paddingBottom"},
  75.                                     SPAN({class: "editable"}, '$paddingBottom')
  76.                                 ),
  77.                                 DIV({class: "layoutLabelLeft layoutLabel v$paddingLeft"},
  78.                                     SPAN({class: "editable"}, '$paddingLeft')
  79.                                 ),
  80.  
  81.                                 DIV({class: "contentLayoutBox layoutBox editGroup"},
  82.                                     DIV({class: "layoutLabelCenter layoutLabel"},
  83.                                         SPAN({class: "layoutLabelWidth layoutLabel editable"}, '$width'),
  84.                                         " x ",
  85.                                         SPAN({class: "layoutLabelHeight layoutLabel editable"}, '$height')
  86.                                     )
  87.                                 )
  88.                             )
  89.                         )
  90.                     )
  91.                 )
  92.             ),
  93.  
  94.         getVerticalText: function(n)
  95.         {
  96.             return getVerticalText(n);
  97.         }
  98.     }),
  99.  
  100.     // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  101.  
  102.     onMouseOver: function(event)
  103.     {
  104.         var layoutBox = getAncestorByClass(event.target, "layoutBox");
  105.         var boxFrame = layoutBox ? getBoxFrame(layoutBox) : null;
  106.  
  107.         if (this.highlightedBox)
  108.             removeClass(this.highlightedBox, "highlighted");
  109.  
  110.         this.highlightedBox = layoutBox;
  111.  
  112.         if (layoutBox)
  113.             setClass(layoutBox, "highlighted");
  114.  
  115.         Firebug.Inspector.highlightObject(this.selection, this.context, "boxModel", boxFrame);
  116.     },
  117.  
  118.     onMouseOut: function(event)
  119.     {
  120.         var nextTarget = event.relatedTarget;
  121.         if (nextTarget && getAncestorByClass(nextTarget, "layoutBox"))
  122.             return;
  123.  
  124.         if (this.highlightedBox)
  125.             removeClass(this.highlightedBox, "highlighted");
  126.  
  127.         this.highlightedBox = null;
  128.  
  129.         Firebug.Inspector.highlightObject(null, null, "boxModel");
  130.     },
  131.  
  132.     // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  133.     // extends Panel
  134.  
  135.     name: "layout",
  136.     parentPanel: "html",
  137.     order: 1,
  138.  
  139.     initialize: function()
  140.     {
  141.         this.onMouseOver = bind(this.onMouseOver, this);
  142.         this.onMouseOut = bind(this.onMouseOut, this);
  143.  
  144.         Firebug.Panel.initialize.apply(this, arguments);
  145.     },
  146.  
  147.     initializeNode: function(oldPanelNode)
  148.     {
  149.         this.panelNode.addEventListener("mouseover", this.onMouseOver, false);
  150.         this.panelNode.addEventListener("mouseout", this.onMouseOut, false);
  151.     },
  152.  
  153.     destroyNode: function()
  154.     {
  155.         this.panelNode.removeEventListener("mouseover", this.onMouseOver, false);
  156.         this.panelNode.removeEventListener("mouseout", this.onMouseOut, false);
  157.     },
  158.  
  159.     supportsObject: function(object)
  160.     {
  161.         return object instanceof Element ? 1 : 0;
  162.     },
  163.  
  164.     refresh: function()
  165.     {
  166.         this.updateSelection(this.selection);
  167.     },
  168.  
  169.     updateSelection: function(element)
  170.     {
  171.         var view = element ? element.ownerDocument.defaultView : null;
  172.         if (!view)
  173.             return this.panelNode.innerHTML = "";
  174.  
  175.         var prev = getPreviousElement(element.previousSibling);
  176.         var next = getNextElement(element.nextSibling);
  177.  
  178.         var style = view.getComputedStyle(element, "");
  179.         var prevStyle = prev ? view.getComputedStyle(prev, "") : null;
  180.         var nextStyle = next ? view.getComputedStyle(next, "") : null;
  181.  
  182.         function getStyle(st, name) { return parseInt(st.getPropertyCSSValue(name).cssText); }
  183.  
  184.         var args = getBoxFromStyles(style, element);
  185.  
  186.         args.outerLeft = args.outerRight = args.outerTop = args.outerBottom = 0;
  187.         args.outerLeftMode = args.outerRightMode = args.outerTopMode = args.outerBottomMode = "";
  188.  
  189.         var position = style.getPropertyCSSValue("position").cssText;
  190.         if (!Firebug.showAdjacentLayout || position == "absolute" || position == "fixed")
  191.         {
  192.             args.outerLabel = $STR("LayoutOffset");
  193.             args.outerLeft = element.offsetLeft;
  194.             args.outerTop = element.offsetTop;
  195.             args.outerRight = args.outerBottom = 0;
  196.             args.outerLeftMode = args.outerRightMode = args.outerTopMode
  197.                 = args.outerBottomMode = "absoluteEdge";
  198.         }
  199.         else
  200.         {
  201.             var parentStyle = isElement(element.parentNode)
  202.                 ? view.getComputedStyle(element.parentNode, "")
  203.                 : null;
  204.  
  205.             if (parentStyle)
  206.             {
  207.                 var display = style.getPropertyCSSValue("display").cssText;
  208.                 if (display == "block")
  209.                 {
  210.                     var firstSibling = getNextElement(element.parentNode.firstChild);
  211.                     var lastSibling = getPreviousElement(element.parentNode.lastChild);
  212.  
  213.                     if (firstSibling == element)
  214.                     {
  215.                         args.outerTop = getStyle(parentStyle, "padding-top");
  216.                         args.outerTopMode = "parentTop";
  217.                     }
  218.                     else if (prev)
  219.                     {
  220.                         args.outerTop = getStyle(prevStyle, "margin-bottom");
  221.                         args.outerTopMode = "siblingTop";
  222.                     }
  223.  
  224.                     if (lastSibling == element)
  225.                     {
  226.                         args.outerBottom = getStyle(parentStyle, "padding-bottom");
  227.                         args.outerBottomMode = "parentBottom";
  228.                     }
  229.                     else if (next)
  230.                     {
  231.                         args.outerBottom = getStyle(nextStyle, "margin-top");
  232.                         args.outerBottomMode = "siblingBottom";
  233.                     }
  234.  
  235.                     args.outerLeft = getStyle(parentStyle, "padding-left");
  236.                     args.outerLeftMode = "parentLeft";
  237.  
  238.                     args.outerRight = getStyle(parentStyle, "padding-right");
  239.                     args.outerRightMode = "parentRight";
  240.                 }
  241.                 else
  242.                 {
  243.                     if (prevStyle)
  244.                     {
  245.                         args.outerLeft = getStyle(prevStyle, "margin-right");
  246.                         args.outerLeftMode = "siblingLeft";
  247.                     }
  248.                     else
  249.                     {
  250.                         args.outerLeft = getStyle(parentStyle, "padding-left");
  251.                         args.outerLeftMode = "parentLeft";
  252.                     }
  253.  
  254.                     if (nextStyle)
  255.                     {
  256.                         args.outerRight = getStyle(nextStyle, "margin-left");
  257.                         args.outerRightMode = "siblingRight";
  258.                     }
  259.                     else
  260.                     {
  261.                         args.outerRight = getStyle(parentStyle, "padding-right");
  262.                         args.outerRightMode = "parentRight";
  263.                     }
  264.  
  265.                     args.outerTop = getStyle(parentStyle, "padding-top");
  266.                     args.outerTopMode = "parentTop";
  267.  
  268.                     args.outerBottom = getStyle(parentStyle, "padding-bottom");
  269.                     args.outerBottomMode = "parentBottom";
  270.                 }
  271.  
  272.                 args.outerLabel = $STR("LayoutAdjacent");
  273.             }
  274.             else
  275.                 args.outerLabel = "";
  276.         }
  277.  
  278.         this.template.tag.replace(args, this.panelNode);
  279.     },
  280.  
  281.     updateOption: function(name, value)
  282.     {
  283.         if (name == "showAdjacentLayout")
  284.         {
  285.             this.updateSelection(this.selection);
  286.         }
  287.     },
  288.  
  289.     getOptionsMenuItems: function()
  290.     {
  291.         return [
  292.             optionMenu("ShowRulers", "showRulers"),
  293.         ];
  294.     },
  295.  
  296.     getEditor: function(target, value)
  297.     {
  298.         if (!this.editor)
  299.             this.editor = new LayoutEditor(this.document);
  300.  
  301.         return this.editor;
  302.     }
  303. });
  304.  
  305. // ************************************************************************************************
  306. // LayoutEditor
  307.  
  308. function LayoutEditor(doc)
  309. {
  310.     this.initializeInline(doc);
  311.  
  312.     this.noWrap = false;
  313.     this.numeric = true;
  314. }
  315.  
  316. LayoutEditor.prototype = domplate(Firebug.InlineEditor.prototype,
  317. {
  318.     saveEdit: function(target, value, previousValue)
  319.     {
  320.         if (!this.panel.selection.style)
  321.             return;
  322.  
  323.         var labelBox = getAncestorByClass(target, "layoutLabel");
  324.         var layoutBox = getLayoutBox(labelBox);
  325.  
  326.         var boxFrame = getBoxFrame(layoutBox);
  327.         var boxEdge = getBoxEdge(labelBox);
  328.  
  329.         var styleName;
  330.         if (boxFrame == "content" || boxFrame == "offset")
  331.             styleName = boxEdge.toLowerCase();
  332.         else if (boxFrame == "border")
  333.             styleName = boxFrame+boxEdge+"Width";
  334.         else
  335.             styleName = boxFrame+boxEdge;
  336.  
  337.         var intValue = value ? value : 0;
  338.         this.panel.selection.style[styleName] = intValue + "px";
  339.  
  340.         if (Firebug.Inspector.highlightedElement == this.panel.selection)
  341.         {
  342.             var boxFrame = this.highlightedBox ? getBoxFrame(this.highlightedBox) : null;
  343.             Firebug.Inspector.highlightObject(this.panel.selection, this.panel.context, "boxModel", boxFrame);
  344.         }
  345.  
  346.         if (hasClass(target, "layoutVerticalText"))
  347.             target.innerHTML = getVerticalText(intValue);
  348.         else
  349.             target.innerHTML = intValue;
  350.  
  351.         if (previousValue == "0" && !!value)
  352.             removeClass(target.parentNode, "v0");
  353.         else if (!value)
  354.             setClass(target.parentNode, "v0");
  355.     },
  356.  
  357.     endEditing: function(target, value, cancel)
  358.     {
  359.         // Don't remove groups
  360.         return false;
  361.     }
  362. });
  363.  
  364. // ************************************************************************************************
  365. // Local Helpers
  366.  
  367. function getLayoutBox(element)
  368. {
  369.     var re = /([^\s]+)LayoutBox/;
  370.     for (var box = element; box; box = box.parentNode)
  371.     {
  372.         if (re.exec(box.className))
  373.             return box;
  374.     }
  375. }
  376.  
  377. function getBoxFrame(element)
  378. {
  379.     var re = /([^\s]+)LayoutBox/;
  380.     var m = re.exec(element.className);
  381.     return m ? m[1] : "";
  382. }
  383.  
  384. function getBoxEdge(element)
  385. {
  386.     var re = /layoutLabel([^\s]+)/;
  387.     var m = re.exec(element.className);
  388.     return m ? m[1] : "";
  389. }
  390.  
  391. function getVerticalText(n)
  392. {
  393.     n = n+"";
  394.     var text = [];
  395.     for (var i = 0; i < n.length; ++i)
  396.         text.push(n[i]);
  397.     return text.join("<br>");
  398. }
  399.  
  400. // ************************************************************************************************
  401.  
  402. Firebug.registerPanel(LayoutPanel);
  403.  
  404. // ************************************************************************************************
  405.  
  406. }});
  407.